<template>
  <div class="main-app">
    <el-row style="margin-top: 10px">
      <el-form ref="form" :model="form" :rules="rules" label-width="200px">
        <el-col :span="8">
          <el-form-item label="转运计划编号:">
            <el-input v-model="form.transferPlanNumber" disabled />
          </el-form-item>
          <el-form-item label="产废单位:">
            <el-input v-model="form.productUnitObj.name" disabled />
          </el-form-item>

          <el-form-item label="接受单位:">
            <el-select v-model="form.ccId" disabled style="width: 100%;">
              <el-option v-for="item in collectionUnitList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="运输单位:">
            <el-select v-model="form.tcId" disabled style="width: 100%;">
              <el-option v-for="item in transportUnitList" :key="item.id" :label="item.name" :value="item.id" />

            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="拟定转运时间:">
            <div class="block">
              <el-date-picker v-model="form.transportTime" disabled type="daterange" range-separator="至"
                              start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;" format="yyyy 年 MM 月 dd 日"
              />
            </div>
          </el-form-item>
          <el-form-item label="" disabled style="margin-top: -20px;" />
          <el-form-item label="通讯地址:">
            <el-input v-model="form.productUnitObj.detailedAddress" disabled />
          </el-form-item>
          <el-form-item label="通讯地址:" disabled>
            <el-input v-model="form.collectionUnitObj.detailedAddress" disabled />
          </el-form-item>
          <el-form-item label="通讯地址:" disabled>
            <el-input v-model="form.transportUnitObj.detailedAddress" disabled />
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <el-divider content-position="left">拟转移危险类别</el-divider>
    <el-row style="margin-top: -10px; padding: 10px">
      <el-form :inline="true" class="form-inline">
        <el-form-item>
          <div>拟定转移数量 ：{{ form.number }}</div>
        </el-form-item>
        <el-form-item>
          <el-divider direction="vertical" />
        </el-form-item>
        <el-form-item>
          <div>拟定转移重量 ：{{ form.wastWeight }} 吨</div>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row style="margin-top: -10px">

      <el-table id="table" :data="form.tableData" highlight-current-row border style="width: 100%" row-key="id" lazy
                :load="load" :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
        <el-table-column prop="name" label="废物名称" width="180" />

        <el-table-column prop="categoryContent" label="废物类别" />
        <el-table-column prop="codeId" label="废物代码" />
        <el-table-column prop="characteristicContent" label="危险特性" />
        <el-table-column prop="physicalProperties" label="废物形态">
          <template slot-scope="scope">
            <el-tag size="medium" style="width: 100%; text-align: center;" effect="dark">
              {{ scope.row.physicalProperties |parsePhysicalProperties }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="hazardousSubstancesName" label="危害成分" />
        <!-- <el-table-column prop="containerCategory" label="容器类型">
          <template slot-scope="scope">
            <el-tag size="medium" style="width: 100%; text-align: center;" effect="dark">
              {{ scope.row.containerCategory | parseContainerCategory }}
            </el-tag>
          </template>
        </el-table-column> -->

        <el-table-column prop="hwAmount" label="实际转移重量 (吨)" width="180" />
        <el-table-column prop="hwCount" label="容器数量" width="180" />
        <el-table-column prop="wastWeight" label="拟定转移重量 (吨)" width="180" />
      </el-table>

      <!-- <el-table :data="form.tableData" border style="width: 100%" >
        <el-table-column prop="name" label="废物名称" width="180" />
        <el-table-column prop="wastWeight" label="拟定转移重量 (吨)" width="180" />
        <el-table-column prop="wastWeight" label="转移重量 (吨)" width="180" />
        <el-table-column prop="wastWeight" label="容器数量" width="180" />
        <el-table-column prop="categoryContent" label="废物类别" />
        <el-table-column prop="codeId" label="废物代码" />
        <el-table-column prop="characteristicContent" label="危险特性" />
        <el-table-column prop="containerCategory" label="容器类型">
          <template slot-scope="scope">
            <el-tag size="medium" style="width: 100%; text-align: center;" effect="dark">
              {{ scope.row.containerCategory | parseContainerCategory }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="hazardousSubstancesName" label="危害成分" />
        <el-table-column prop="physicalProperties" label="废物形态">
          <template slot-scope="scope">
            <el-tag size="medium" style="width: 100%; text-align: center;" effect="dark">
              {{ scope.row.physicalProperties |parsePhysicalProperties }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table> -->

    </el-row>
    <el-row style="margin-top: 40px; text-align: center">
      <el-form :inline="true" class="form-inline">
        <el-form-item>
          <el-button @click="cancel">返 回</el-button>
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>

<script>
// Table组件相关逻辑，需要引用
import {
  pageMixin
} from "../../../mixins/index";
import {
  PhysicalProperties,
  ContainerType
} from "../../../utils/resource.js";
import {
  getTransportApplyInfoById,
  getApplyWastList,
  GetAllHWInoutrecordListTwo
} from '../../../api/wastereceipt.js';

import {
  getUnitInfoByType,
  getUnitInfoById
} from '../../../api/system.js';
import {
  getFloat,
  parseStartAndEndTimeList
} from '../../../utils/index.js';
export default {
  filters: {
    parseDate(value) {
      if (value) {
        return value.replace("T", " ");
      }
    },

    parsePhysicalProperties(value) {
      if (value != null) {
        return PhysicalProperties.find((p) => p.value === `${value}`).label;
      }
    },
    parseContainerCategory(value) {
      if (value != null) {
        return ContainerType.find((p) => p.value === `${value}`).label;
      }
    },

  },
  mixins: [pageMixin],
  data() {
    return {
      form: {
        id: "",
        transportPlanId: "",
        transferPlanNumber: "",

        productUnitObj: {},
        ccId: "",
        collectionUnitObj: {},

        tcId: "",
        transportUnitObj: {

        },
        startProposedTransferTime: "",
        endProposedTransferTime: "",
        // transportTime: [new Date(2000, 10, 10), new Date(2000, 10, 11)],
        transportTime: [],

        number: 0,
        wastWeight: 0,

        tableData: [],
      },

      collectionUnitList: [],
      productUnitList: [],
      transportUnitList: [],

      rules: {

        transportTime: [{
          required: true,
          message: "请填写转运时间",
          trigger: "change"
        }],

        tcId: [{
          required: true,
          message: "请选择运输单位",
          trigger: "change"
        }],
        ccId: [{
          required: true,
          message: "请选择接受单位",
          trigger: "change"
        }],
      },
    };
  },
  async created() {
    // 获取运输单位list
    var searchData = {
      searchParam: JSON.stringify({
        Type: "40",
		 AreaNumber:  this.$store.state.user.userObj.areaNumberStr,
      })
    }
    var searchData2 = {
      searchParam: JSON.stringify({
        Type: "10",
		 AreaNumber:  this.$store.state.user.userObj.areaNumberStr,
      })
    }
    var userObj = this.$store.state.user.userObj;
    // 并行获取数据
    Promise.all([await getUnitInfoByType(searchData), await getUnitInfoByType(searchData2),
      await getUnitInfoById(userObj.orgGuid)
    ])
      .then((result) => {
        this.transportUnitList = result[0].data;
        this.collectionUnitList = result[1].data;
        this.form.productUnitObj = result[2].data;
      })
      .then(async() => {
        var tempFormInfo = JSON.parse(localStorage.getItem('tempFormInfo'));
        if (tempFormInfo) {
          this.form = tempFormInfo;
          this.init();
        } else {
          const {
            id
          } = this.$route.params;
          if (id) {
            this.form.id = id;

            await this.getTransportApplyInfoById(id);
          } else {
            this.init();
          }
        }
      })
  },
  methods: {

    async load(tree, treeNode, resolve) {
      var searchData = {
        searchParam: JSON.stringify({
          // "OperateType": "20",
          "InOutType": "40",
          TransferApplyId: this.form.id,
          // HazardousWasteId: tree.hazardousWasteId,

          "CodeContent": tree.codeId, // (废物代码)
          "Name": tree.name, // (废物名称)
          "ContainerCategory": tree.containerCategory, // (容器类别)
          "PhysicalProperties": tree.physicalProperties, // (废物形态)

        })
      }

      const {
        data
      } = await GetAllHWInoutrecordListTwo(searchData);
      console.log(searchData);

      if (data) {
        data.forEach(item => {
          item.hwAmount = item.inOutAmount;

          item.hwCount = 1;
          item.wastWeight = "-";
        })
      }
      console.log(data);
      resolve(data);
    },
    init() {
      this.form.number = this.form.tableData.length;
      this.addWasteWeight();
      if (!this.form.tcId) {
        this.form.tcId = this.transportUnitList[0].id;
        this.form.transportUnitObj = this.transportUnitList[0];
      } else {
        this.form.transportUnitObj = {
          id: "",
          name: "",
          detailedAddress: ""
        };
        this.form.transportUnitObj.id = this.form.tcId;
        this.form.transportUnitObj.name = this.form.tcName;
        this.form.transportUnitObj.detailedAddress = this.form.tcAddress;
      }

      if (!this.form.ccId) {
        this.form.ccId = this.collectionUnitList[0].id;
        this.form.collectionUnitObj = this.collectionUnitList[0];
      } else {
        this.form.collectionUnitObj = {
          id: "",
          name: "",
          detailedAddress: ""
        }
        this.form.collectionUnitObj.id = this.form.ccId;
        this.form.collectionUnitObj.name = this.form.ccName;
        this.form.collectionUnitObj.detailedAddress = this.form.ccAddress;
      }

      if (this.form.wpcId) {
        this.form.productUnitObj = {
          id: "",
          name: "",
          detailedAddress: ""
        }
        this.form.productUnitObj.id = this.form.wpcId;
        this.form.productUnitObj.name = this.form.wpcName;
        this.form.productUnitObj.detailedAddress = this.form.wpcAddress;
      }

      // 设置时间
      if (!this.form.startProposedTransferTime) {
        this.form.transportTime = [];
      } else {
        this.form.transportTime = parseStartAndEndTimeList(this.form.startProposedTransferTime, this.form
          .endProposedTransferTime);
      }
    },

    async getTransportApplyInfoById(id) {
      var searchData = {
        limit: this.pageSize,
        page: this.currentPage,
        searchParam: JSON.stringify({
          TransferApplyId: this.form.id
        })
      }

      this.loading = true;
      this.form.tableData = [];

      Promise.all([await getTransportApplyInfoById(this.form.id), await getApplyWastList(searchData)])
        .then((result) => {
          var obj = this.form.productUnitObj;

          this.form = result[0].data;
          this.form.productUnitObj = obj;
          result[1].data.forEach(item => {
            item.id = item.hazardousWasteId;
          })
          this.form.tableData = result[1].data;
          this.form.tableData.forEach(item => {
            item.hasChildren = true
          })

          console.log(this.form.tableData);
          console.log("this.form.tableData");
          this.total = result[1].count;
          this.init();
          this.loading = false;
        })
    },

    addWasteWeight() {
      this.form.wastWeight = 0;
      this.form.tableData.forEach(item => {
        if (item.wastWeight < 0) {
          item.wastWeight = 0
        }
        this.form.wastWeight += getFloat(item.wastWeight, 5)
      })
    },

    cancel() {
      // 清除转运申请详情存在localstroage的临时表单内容
      this.$router.push("/warehouse/inhouse_receive/formList");
    },
  },
};
</script>
